.backButton:hover {
  background-color: #cdcaca;
}
.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.placeholder {
  width: 36px;
}
/* 进度指示器 */
.progressContainer {
margin-top: -15px;
margin-bottom: 10px;
}  
.progressSteps {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.stepItem {
  font-size: 14px;
}
.stepItem.active .stepText {
  color: #1890ff;
  font-weight: 600;
}

.stepArrow {
  font-size: 16px;
  color: #ccc;
  font-weight: bold;
  margin: 0 4px;
  transition: color 0.3s ease;
}

/* 服务保障 */
.serviceGuarantee {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.guaranteeTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.shieldIcon {
  font-size: 18px;
}

.guaranteeItems {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.guaranteeItem {
  font-size: 14px;
  color: #666;
  padding: 4px 8px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

/* 风险告知 */
.agreementContainer {
  background-color: #e1e0e0;
  padding: 16px;
  margin: 8px;
  border-radius: 8px;
}
.strikethrough_price {
  text-decoration: line-through;
  /* 可添加颜色、字体等样式优化 */
  color: #999; /* 示例：设置删除线文本为灰色 */
  font-size: 14px;
}
.agreementText {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.agreementLink {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}

.agreementCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agreementCheckbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1890ff;
}

.agreementCheckbox label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

/* 医生助手对话 */
.chatContainer {
  flex: 1;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.chatMessage {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.userMessage {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f0f0f0;
}

.messageBubble {
  background-color: #f8f8f8;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  max-width: 80%;
  word-wrap: break-word;
}

.userBubble {
  background-color: #1890ff;
  color: #fff;
}

/* 消息中的图片样式 */
.messageImages {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.messageImageContainer {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.messageImage {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
  border-radius: 8px;
}

.messageImage:hover {
  transform: scale(1.05);
}

/* 用户消息中的图片样式 */
.userMessage .messageImage {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 助手消息中的图片样式 */
.chatMessage:not(.userMessage) .messageImage {
  border: 2px solid rgba(0, 0, 0, 0.1);
}

/* 暂无图片样式 */
.noImageContainer {
  width: 120px;
  height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  cursor: default;
}

.noImageIcon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.noImageText {
  font-size: 12px;
  color: #999;
  text-align: center;
}

/* 用户消息中的暂无图片样式 */
.userMessage .noImageContainer {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

.userMessage .noImageText {
  color: rgba(255, 255, 255, 0.8);
}

/* 图片预览模态框 */
.imagePreviewModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.imagePreviewContent {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.previewImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.closeButton {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.closeButton:hover {
  background-color: #fff;
}

/* 患者档案选择界面 - 简化版 */
.patientSelectionContainer {
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.patientList {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-height: 40vh;
}

.patientItem {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.patientItem:hover {
  background-color: #f8f8f8;
  border-color: #1890ff;
}

.patientAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 12px;
}

.patientInfo {
  flex: 1;
}

.patientName {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.patientDetails {
  font-size: 12px;
  color: #666;
}

.selectButton {
  padding: 6px 12px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}


.selectFileText {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.selectFileText:hover {
  background-color: #f5f5f5;
}

.createNewButton {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.createNewButton:hover {
  background-color: #40a9ff;
}

.plusIcon {
  font-size: 16px;
  font-weight: bold;
}

/* 当前选择的患者信息 */
.selectedPatientInfo {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  padding: 8px 16px;
  margin: 0 16px 8px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.selectedLabel {
  color: #666;
}

.selectedName {
  color: #1890ff;
  font-weight: 600;
  margin: 0 4px;
}

.selectedDetails {
  color: #666;
}

/* 打字指示器 */
.typingIndicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typingIndicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  animation: typing 1.4s infinite ease-in-out;
}

.typingIndicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typingIndicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 底部输入区域 */
.inputContainer {
  background-color: #fff;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* 确保在selectedContainers上方 */
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.inputWrapper {
  position: relative;
  flex: 1;
}

.textInput {
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
  overflow-y: auto;
}

.textInput:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.charCount {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  color: #999;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 4px;
}

.submitButton {
  width: 80px;
  height: 40px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.submitButton:hover {
  background-color: #40a9ff;
}

.submitButton:active {
  background-color: #096dd9;
}

.submitButton:disabled {
  background-color: #d9d9d9;
  color: #999;
  cursor: not-allowed;
}

.submitButton:disabled:hover {
  background-color: #d9d9d9;
}

/* 图片上传界面 */
.imageUploadContainer {
  background-color: #fff;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 60vh;
  overflow-y: auto;
}

.uploadHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.uploadTitle {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.skipButton {
  background: none;
  border: none;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}

.skipButton:hover {
  background-color: #f0f8ff;
  border-radius: 4px;
}

.uploadSubtitle {
  font-size: 12px;
  color: #666;
  margin: 0 0 16px 0;
}

.imageGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.imagePreview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.imagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.removeButton {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploadArea {
  aspect-ratio: 1;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.uploadArea:hover {
  border-color: #1890ff;
}

.uploadIcon {
  font-size: 24px;
  color: #999;
  margin-bottom: 4px;
}

.uploadText {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.confirmButton {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.confirmButton:hover {
  background-color: #40a9ff;
}

.confirmButton:active {
  background-color: #096dd9;
}

.confirmButton:disabled {
  background-color: #d9d9d9;
  color: #999;
  cursor: not-allowed;
}

.confirmButton:disabled:hover {
  background-color: #d9d9d9;
}

/* 上传进度相关样式 */
.uploadOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.progressBar {
  width: 80%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progressFill {
  height: 100%;
  background-color: #1890ff;
  transition: width 0.3s ease;
}

.progressText {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.uploadSuccess {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background-color: #52c41a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.successIcon {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.removeButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .container {
    padding-bottom: 90px; /* 移动端调整底部间距 */
  }
  
  .header {
    padding: 10px 12px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .progressContainer {
    padding: 16px 12px;
    background: #fff;
    height: 40px;

  }
   .selectedContainers{
     position: fixed;
     bottom: 80px; /* 为输入框留出空间 */
     left: 0;
     right: 0;
     background: #fff;
     padding: 10px;
     z-index: 999; /* 确保在输入框上方 */
   }
  .selectedText{
    background-color: #fff;
    margin: 5px;
    font-size: 14px;
    padding: 10px;
  }
  .serviceGuarantee,
  .agreementContainer,
  .chatContainer {
    padding: 12px;
    background: #fff;
  }
  
  .inputContainer {
    padding: 12px;
    gap: 8px;
  }
  
  .guaranteeItems {
    gap: 8px;
  }
  
  .guaranteeItem {
    font-size: 13px;
    padding: 3px 6px;
  }
  
  .messageBubble {
    font-size: 13px;
    padding: 10px 14px;
  }
  
  .textInput {
    min-height: 36px;
    max-height: 100px;
    font-size: 13px;
  }
  
  .submitButton {
    width: 70px;
    height: 36px;
    font-size: 13px;
  }
  
  .imageUploadContainer {
    padding: 12px;
    max-height: 50vh;
  }
  
  .imageGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .uploadTitle {
    font-size: 14px;
  }
  
  .uploadSubtitle {
    font-size: 11px;
  }
  
  .confirmButton {
    height: 40px;
    font-size: 15px;
  }
  
  /* 移动端图片消息样式 */
  .messageImage {
    width: 80px;
    height: 80px;
  }
  
  .messageImages {
    gap: 6px;
  }
  
  /* 移动端暂无图片样式 */
  .noImageContainer {
    width: 80px;
    height: 80px;
  }
  
  .noImageIcon {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .noImageText {
    font-size: 11px;
  }
  
  /* 移动端图片预览样式 */
  .imagePreviewModal {
    padding: 10px;
  }
  
  .closeButton {
    top: -30px;
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  
  /* 移动端患者选择样式 */
  .patientSelectionContainer {
    max-height: 50vh;
  }
  
  .patientList {
    padding: 12px;
    max-height: 30vh;
  }
  
  .patientItem {
    padding: 10px;
  }
  
  .patientAvatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-right: 8px;
  }
  
  .patientName {
    font-size: 14px;
  }
  
  .patientDetails {
    font-size: 11px;
  }
  
  .selectButton {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .patientActions {
    padding: 12px;
  }
  
  .selectFileText {
    font-size: 13px;
  }
  
  .createNewButton {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .container {
    background-color: #1a1a1a;
  }
  
  .header,
  .serviceGuarantee,
  .agreementContainer,
  .chatContainer,
  .inputContainer {
    background: #2a2a2a;
    border-color: #404040;
    margin-top: 8dvh;
  }
  
  .title,
  .guaranteeTitle,
  .agreementCheckbox label {
    color: #fff;
  }
  
  .stepText,
  .guaranteeItem,
  .agreementText {
    color: #ccc;
  }
  
  .messageBubble {
    background-color: #3a3a3a;
    color: #fff;
  }
  
  .textInput {
    background-color: #2a2a2a;
    border-color: #404040;
    color: #fff;
  }
  
  .textInput:focus {
    border-color: #1890ff;
  }
  
  .charCount {
    background-color: rgba(42, 42, 42, 0.9);
    color: #999;
  }
}

/* 登录提示界面样式 */
.loginContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.loginMessage {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #4A90E2;
}

.loginIcon {
  font-size: 24px;
  margin-right: 12px;
  color: #4A90E2;
}

.loginText h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.loginText p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.loginButton {
  width: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.loginButton:hover {
  background: linear-gradient(135deg, #357ABD 0%, #2E6BA8 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}

.loginButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* 下一步按钮界面样式 */
.nextStepContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nextStepButton {
  width: 100%;
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

.nextStepButton:hover {
  background: linear-gradient(135deg, #389e0d 0%, #237804 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
}

.nextStepButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

/* 档案选择区域样式 */
.profileSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.savedProfile {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.profileCard {
  background: white;
  border: 2px solid #1890ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.profileHeader {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.profileName {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.profileRelation {
  font-size: 14px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
}

.profileDetails {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.profileAge {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.profileGender {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.profilePhone {
  font-size: 14px;
  color: #666;
  font-family: monospace;
}

.profileIdCard {
  font-size: 12px;
  color: #999;
  font-family: monospace;
  letter-spacing: 1px;
}

.profileActions {
  text-align: center;
}

.selectButton {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selectButton:hover {
  background: linear-gradient(135deg, #389e0d 0%, #237804 100%);
  transform: translateY(-1px);
}
